<template>
    <div class="full-h flex-center" id="xpNote" style="position:relative;">
        <div class="xp-note-left full-h flex-column-start" v-show="isExpand">
            <div class="flex-between xp-note-left-top">
                <div class="input-search">
                    <el-icon><Search /></el-icon>
                    <input type="text" v-model="searchValue" placeholder="搜索" @keyup.enter="handleSearch">
                </div>
                <el-dropdown placement="bottom-end">
                    <div class="note-add flex-center">
                        <el-icon><Plus /></el-icon>
                    </div>
                    <template #dropdown>
                        <el-dropdown-item @click="handleAddNote">新建备忘录</el-dropdown-item>
                        <el-dropdown-item divided @click="sort=0">默认排序</el-dropdown-item>
                        <el-dropdown-item @click="sort=1">按创建时间排序(升序)</el-dropdown-item>
                        <el-dropdown-item @click="sort=2">按创建时间排序(降序)</el-dropdown-item>
                        <el-dropdown-item @click="sort=3">按编辑时间排序(升序)</el-dropdown-item>
                        <el-dropdown-item @click="sort=4">按编辑时间排序(降序)</el-dropdown-item>
                    </template>
                </el-dropdown>
            </div>
            <div class="scrollbar full-layout xp-note-content">
                <ul>
                    <li class="xp-note-item"  
                    v-for="item in searchData.length ? searchData : appStore.getNoteList(sort)" 
                    :key="item.noteId" 
                    :class="noteData.noteId===item.noteId?'xp-note-active':''"
                    @click="handleSelect(item)">
                        <p class="flex-between">
                            <p class="xp-note-title oneline">{{item.title}}</p>
                            <div class="flex-center">
                                <el-icon 
                                :title="item.isTop?'取消置顶':'置顶'" 
                                @click.stop="handleTop(item)" 
                                :color="item.isTop?'#0052d9':''"><Pointer /></el-icon>
                                <el-icon title="删除" @click.stop="handleDelete(item)" style="margin-left:10px"><Delete /></el-icon>
                            </div>
                        </p>
                        <div class="xp-note-content oneline">
                            <span>{{item.ut}}</span>
                            {{item.content}}
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="xp-hide-note-left full-h" v-show="!isExpand">
            <div class="expand-note-icon flex-center" @click="handleLeftMenu(true)">
                <el-icon><Expand /></el-icon>
            </div>
        </div>
        <div class="xp-note-right full-h">
            <template v-if="noteData.noteId">
                <div class="note-input-title">
                    <el-input
                    id="noteTitle"
                    type="textarea"
                    placeholder="请输入标题"
                    v-model="noteData.title"
                    maxlength="50"
                    resize='none'
                    style="font-size:16px;font-weight: 600;"
                    :input-style="{fontSize:'20px',fontWeight:'600'}"
                    :autosize="{ minRows: 1, maxRows: 1 }"
                    @keydown.enter="handleEnter"
                    />
                </div>
                <div class="note-input-content scrollbar">
                    <el-input
                    id="noteContent"
                    class="scrollbar"
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="noteData.content"
                    maxlength="2000"
                    resize='none'
                    autosize
                    show-word-limit
                    style="font-size:14px;height: 100%;"
                    />
                </div>
                <span class="xp-ct">创建时间:{{noteData.ct}}</span>
            </template>
        </div>
        <div class="expand-note-menu full-layout" v-show="visible" @click="handleLeftMenu(false)">
            <transition name="leftMenu">
                <div class="xp-note-left full-h flex-column-start" v-if="visible1">
                    <div class="flex-between xp-note-left-top" @click.stop="">
                        <div class="input-search">
                            <el-icon><Search /></el-icon>
                            <input type="text" v-model="searchValue" placeholder="搜索" @keyup.enter="handleSearch">
                        </div>
                        <el-dropdown placement="bottom-end">
                            <div class="note-add flex-center">
                                <el-icon><Plus /></el-icon>
                            </div>
                            <template #dropdown>
                                <el-dropdown-item @click.stop="handleAddNote">新建备忘录</el-dropdown-item>
                                <el-dropdown-item divided @click.stop="sort=0">默认排序</el-dropdown-item>
                                <el-dropdown-item @click.stop="sort=1">按创建时间排序(升序)</el-dropdown-item>
                                <el-dropdown-item @click.stop="sort=2">按创建时间排序(降序)</el-dropdown-item>
                                <el-dropdown-item @click.stop="sort=3">按编辑时间排序(升序)</el-dropdown-item>
                                <el-dropdown-item @click.stop="sort=4">按编辑时间排序(降序)</el-dropdown-item>
                            </template>
                        </el-dropdown>
                    </div>
                    <div class="scrollbar full-layout xp-note-content" @click.stop="">
                        <ul>
                            <li class="xp-note-item"  
                            v-for="item in searchData.length ? searchData : appStore.getNoteList(sort)" 
                            :key="item.noteId" 
                            :class="noteData.noteId===item.noteId?'xp-note-active':''"
                            @click="handleSelect(item)">
                                <p class="flex-between">
                                    <p class="xp-note-title oneline" :title="item.title">{{item.title}}</p>
                                    <div class="flex-center">
                                        <el-icon 
                                        :title="item.isTop?'取消置顶':'置顶'" 
                                        @click.stop="handleTop(item)" 
                                        :color="item.isTop?'#0052d9':''"><Pointer /></el-icon>
                                        <el-icon title="删除" @click.stop="handleDelete(item)" style="margin-left:10px"><Delete /></el-icon>
                                    </div>
                                </p>
                                <div class="xp-note-content oneline" :title="item.content">
                                    <span>{{item.ut}}</span>
                                    {{item.content}}
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script lang='ts'>
import { onBeforeUnmount, onMounted, reactive, toRefs, watch, watchEffect } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { useAppStore } from '@/store/app';
import { formatTime, randomID } from '@/utils/util';
export default {
    name:'xpNotes',
    props: {
        modelData:{
            type:Object,
            default:null
        }
    },
    components: {

    },
    emits:[],
    setup (props, context) 
    {
        const appStore = useAppStore();
        let data = reactive({
            searchValue:'',
            searchData:[] as any,
            timer:null as any,
            isExpand:true,
            visible:false,
            visible1:false,
            noteData:{} as any,
            sort:0
        });
        
        let methods = {
            handleAddNote ()
            {
                let obj = {
                    noteId:randomID(6),
                    ut:formatTime(false),
                    ct:formatTime(false),
                    content:'',
                    title:`新建备忘录${appStore.noteData.length + 1}`,
                    isTop:0
                };
                appStore.addNote(obj);
                methods.handleSelect(obj);
            },
            handleTop (value)
            {
                appStore.topNote(value.noteId);
            },
            handleDelete (value)
            {
                appStore.deleteNote(value.noteId);
                if (value.noteId === data.noteData.noteId) 
                {
                    data.noteData = {};
                }
            },
            handleSelect (value)
            {
                if (value.noteId === data.noteData.noteId) return;
                data.noteData = value;
                methods.handleLeftMenu(false);
            },
            handleSearch ()
            {
                if (data.searchValue.trim() === '') return;
                let reg = new RegExp(data.searchValue, 'i');
                data.searchData = appStore.noteData.filter((item) => 
                {
                    return reg.test(item.title) || reg.test(item.content);
                });
            },
            handleEnter (e)
            {
                e.preventDefault();
                let contentDom = document.querySelector('#noteContent') as HTMLTextAreaElement;
                contentDom.focus();
            },
            handleLeftMenu (value)
            {
                if (value)
                {
                    data.visible = value;
                    setTimeout(() => 
                    {
                        data.visible1 = value;
                    }, 100);
                }
                else
                {
                    data.visible1 = value;
                    setTimeout(() => 
                    {
                        data.visible = value;
                    }, 300);
                }
            },
            handleResize ()
            {
                let element:any = document.querySelector('#xpNote');   
                const observer = new ResizeObserver((entries) => 
                {
                    const con = entries[0];
                    const { width, height } = con.contentRect;
                    if (width <= 530)
                    {
                        data.isExpand = false;
                    }
                    else
                    {
                        data.isExpand = true;
                        methods.handleLeftMenu(false);
                    }
                });
                observer.observe(element);
                // data.timer = setInterval(() => 
                // {
                //     let width = element.offsetWidth;
                //     if (width <= 530)
                //     {
                //         data.isExpand = false;
                //     }
                //     else
                //     {
                //         data.isExpand = true;
                //         methods.handleLeftMenu(false);
                //     }
                // }, 1000);
            }
        };

        watch([() => data.noteData.title, () => data.noteData.content], (newValue, oldValue) => 
        {
            if (newValue !== oldValue)
            {
                appStore.noteData.forEach((item) => 
                {
                    if (item.noteId === data.noteData.noteId)
                    {
                        if (item.content === data.noteData.content && item.title === data.noteData.title) return;
                        console.log('监听到了数据的改变，准备备份');
                        item.title = data.noteData.title;
                        item.content = data.noteData.content;
                        item.ut = formatTime(null);
                    }
                });
            }
        }, {deep:true});

        watchEffect(() => 
        {
            if (data.searchValue.trim() === '')
            {
                data.searchData = [];
            }
        });

        onMounted(() => 
        {
            methods.handleResize();
            if (props.modelData)
            {
                methods.handleSelect(props.modelData);
            }
        });

        onBeforeUnmount(() => 
        {
            clearInterval(data.timer);
        });
        return { 
            ...toRefs(data),
            ...methods,
            Plus,
            appStore
        };
    }
};
</script>

<style scoped lang="scss">
@import '../../../style/config.scss';
@keyframes Hide {
    0% {
        display: block;
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        display: none;
        opacity: 0;
        transform: translateX(-100%);
    }
}
  
@keyframes Show {
    0% {
        display: none;
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        display: block;
    }
}

#xpNote {
    min-width: 260px;
}
.xp-note-left {
    // width: 230px;
    // padding: 10px;
    min-width: 230px;
    flex: 2;
    // max-width: 230px;
    transition: all .3s;
    border-radius: 5px;
    background-color: var(--el-bg-color-tool);
}

.xp-note-right {
    flex: 6;
    padding: 0 3px;
    position: relative;
    // min-width: 300px;
}
.xp-ct {
    color:#808080;
    position: absolute;
    left: 10px;
    bottom: 3px;
    font-size: 13px;
}
.xp-hide-note-left {
    width: 40px;
    max-width: 40px;
    min-width: 40px;
    position: relative;
    border-radius: 5px;
    background-color: var(--el-bg-color-tool);

    .expand-note-icon {
        position: absolute;
        left: 0;
        top: 5px;
        width: 100%;
        height: 30px;
        cursor: pointer;

        &:hover {
            i {
                color:$PrimaryColor;
            }
        }
    }
}

.expand-note-menu {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    background-color: #00000063;

    .xp-note-left {
        position: absolute;
        top: 0;
        left: 0;
    }
}
.xp-note-left-top {
    padding: 10px;
    width: 100%;

    .input-search {
        min-width: 150px;
        height: 30px;
        background-color: var(--el-bg-color);

        input {
            height: 29px;
        }

        i {
            height: 29px !important;
        }
    }

    .note-add {
        width: 30px;
        min-width: 30px;
        height: 30px;
        margin: 0 0 0 10px;
        background-color: var(--el-bg-color-page);
        border-radius: 5px;
        transition: all 0.2s;
        cursor: pointer;

        &:hover {
            background-color: var(--el-bg-color-folder);
        }
    }
}

.xp-note-content {
    overflow-y: auto;
    // margin-top:5px;

    ul {
        width: 100%;
    }
}

.xp-note-active {
    background-color: $BackgroundColor;
}
.xp-note-item {
    // margin: 8px 10px;
    // background-color: $BackgroundColor;
    // border-radius: 5px;
    padding: 10px;
    text-align: left;
    color: $TextColor;
    cursor: pointer;


    i {
        transition: all .3s;

        &:hover {
            color:$PrimaryColor;
        }
    }

    .xp-note-title {
        font-size: .9em;
        font-weight: 550;
        padding: 2px 0;
        max-width: 80%;
    }

    .xp-note-content {
        font-size: .8em;
        padding: 2px 0;
        color: #808080;
        overflow: hidden;

        span {
            font-size: 13px;
            color: #3282e5;
            margin-right: 5px;
        }
    }
}
:deep(.el-textarea .el-input__count) {
    background-color: transparent;
}

:deep(.el-textarea__inner) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    background-color: transparent;
    max-height: 100%;
    @extend .scrollbar;
}

.note-input-title 
.note-input-content {
    width: 100%;
    padding: 5px;
}

.note-input-title {
    height: 40px;
}

.note-input-content {
    height: calc(100% - 60px);
    overflow-y: auto;
}

.leftMenu-enter-active {
    animation: Show .3s ease-in-out 0s forwards;
}

.leftMenu-leave-active {
    animation: Hide .3s ease-in-out 0s forwards;
}

</style>
